<template>
	<a-tree-select
		v-model:value="columnId"
		@change="handelChange"
		show-search
		style="width: 100%"
		:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
		placeholder="选择栏区"
		allow-clear
		tree-default-expand-all
		:tree-data="treeData"
		tree-node-filter-prop="label"
	></a-tree-select>
</template>

<script setup="columnTreeSelect">
	import {onMounted} from "vue";
	import bizColumnApi from "@/api/column/bizColumnApi";

	const columnId = ref();
	const treeData = ref([]);
	const emit = defineEmits(['update:columnId']);

	const handelChange = (value) => {
		if(value === undefined){
			emit('update:columnId', undefined);
		}
		const selectedColumnId = value;
		if(selectedColumnId){
			emit('update:columnId', selectedColumnId);
		}
	};

	onMounted(() => {
		getTree();
	});

	const getTree = () => {
		bizColumnApi.getTree()
			.then(resp => {
				treeData.value = resp;
			})
	};

	const clearColumnId = () => {
		columnId.value = undefined;
		emit('update:columnId', undefined);
	}

	defineExpose({
		columnId,
		clearColumnId,
	})

</script>

<style scoped>

</style>
